<template>
  <div>
    <!-- 异常行为告警表格 -->
    <el-card class="table-card" style="margin-bottom: 20px;">
      <div slot="header" class="clearfix">
        <span>异常行为告警</span>
      </div>
      <el-table :data="abnormalBehaviorData" style="width: 100%" max-height="300">
        <el-table-column v-for="header in abnormalBehaviorHeaders" :key="header" :prop="header" :label="header"></el-table-column>
      </el-table>
    </el-card>

    <!-- 异常入侵告警表格 -->
    <el-card class="table-card" style="margin-bottom: 20px;">
      <div slot="header" class="clearfix">
        <span>异常入侵告警</span>
      </div>
      <el-table :data="abnormalIntrusionData" style="width: 100%" max-height="300">
        <el-table-column v-for="header in abnormalIntrusionHeaders" :key="header" :prop="header" :label="header"></el-table-column>
      </el-table>
    </el-card>

    <!-- 异常人脸告警表格 -->
    <el-card class="table-card" style="margin-bottom: 20px;">
      <div slot="header" class="clearfix">
        <span>异常人脸告警</span>
      </div>
      <el-table :data="abnormalFaceData" style="width: 100%" max-height="300">
        <el-table-column v-for="header in abnormalFaceHeaders" :key="header" :prop="header" :label="header"></el-table-column>
      </el-table>
    </el-card>

    <!-- 异常情况告警表格 -->
    <el-card class="table-card" style="margin-bottom: 20px;">
      <div slot="header" class="clearfix">
        <span>异常情况告警</span>
      </div>
      <el-table :data="abnormalConditionData" style="width: 100%" max-height="300">
        <el-table-column v-for="header in abnormalConditionHeaders" :key="header" :prop="header" :label="header"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'MultipleTables',
  data() {
    return {
      // 异常行为告警表格数据
      abnormalBehaviorHeaders: ['camera_id', 'Time', 'video', 'info'],
      abnormalBehaviorData: [],
      // 异常入侵告警表格数据
      abnormalIntrusionHeaders: ['camera_id', 'Time', 'video', 'info'],
      abnormalIntrusionData: [],
      // 异常人脸告警表格数据
      abnormalFaceHeaders: ['camera_id', 'Time', 'video', 'info'],
      abnormalFaceData: [],
      // 异常情况告警表格数据
      abnormalConditionHeaders: ['camera_id', 'Time', 'video', 'info'],
      abnormalConditionData: [],
    };
  },
  created() {
    this.fetchAlarmData();
  },
  methods: {
    fetchAlarmData() {
      fetch('http://127.0.0.1:8000/api/show_alarm')
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          return response.json();
        })
        .then(data => {
          if (data && data.list) {
            data.list.forEach(item => {
              switch (item.type) {
                case '入侵':
                  this.abnormalIntrusionData.push({
                    camera_id: item.camera_id,
                    Time: item.time,
                    video: item.video,
                    info: item.info
                  });
                  break;
                case '黑名单或未知人员':
                  this.abnormalBehaviorData.push({
                    camera_id: item.camera_id,
                    Time: item.time,
                    video: item.video,
                    info: item.info
                  });
                  break;
                case '抽烟':
                case '打电话':
                  this.abnormalFaceData.push({
                    camera_id: item.camera_id,
                    Time: item.time,
                    video: item.video,
                    info: item.info
                  });
                  break;
                case '火灾':
                  this.abnormalConditionData.push({
                    camera_id: item.camera_id,
                    Time: item.time,
                    video: item.video,
                    info: item.info
                  });
                  break;
                default:
                  console.log('Unknown type:', item.type);
              }
            });
          }
        })
        .catch(error => {
          console.error('There has been a problem with your fetch operation:', error);
        });
    }
  }
};
</script>


<style scoped>
.table-container {
  width: 100%;
  overflow-x: auto;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
}

.custom-table th, .custom-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.custom-table th {
  background-color: #f2f2f2;
  color: #333;
}

.custom-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.custom-table tr:hover {
  background-color: #eaeaea;
}

.custom-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #007bff; /* 添加蓝色的边框 */
}

.custom-table th, .custom-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.custom-table th {
  background-color: #f2f2f2;
  color: #333;
}

.custom-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.custom-table tr:hover {
  background-color: #eaeaea;
}
</style>

